<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>账号信息</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>

<body>
    <script src="../res/layui/layui.js"></script>
    <script>
        layui.use(function () {
            //加载获取table模块
            var table = layui.table;
            //加载获取layer弹层模块
            var layer = layui.layer;
            //加载jquery对象
            var $ = layui.jquery;
    
            table.render({
                elem:'#userlist',                              //用于渲染数据的表格元素选择器
                url:'http://127.0.0.1:8080/admin/list',         //服务端数据接口
                page:{//分页配置
                    curr:1,
                    limit:10,
                    limits:[5,10,20,30]
    
                },                                      //开启分页
                cols:[[
                    {type:'checkbox'},
                    {title:'序号',type:'numbers'},
                    {title:'ID',field:'id'},
                    {title:'用户账号',field:'username'},
                    {title:'用户性别',field:'sex',templet:function(d){
                        if(d.sex === 1){
                            return '男'
                        }
                        return '女'
                    }},
                    {title:'创建时间',field:'addtime',templet:'<div>{{ layui.util.toDateString(d.addtime,"yyyy年MM月dd日 HH时mm分ss秒") }}</div>'},
                    {title:'账号状态',field:'status',templet:function(d){
                        if(d.status === 0){
                            return '<div class="layui-badge layui-bg-blue">正常</div>'
                        }
                        return '<div class="layui-badge layui-bg-red">禁用</div>'
                    }},
                    { title: '操作', templet: '#rowTools', width: 300 },
                ]]
            })
    
            //绑定单元格工具事件
            table.on('tool(userFilter)', function (obj) {
                //获取被点击元素的lay-event值，通过该值确定哪个按钮被点击
                let e = obj.event
                switch (e) {
                    case 'details':
                        //详情查看
                        layer.open({
                            type:1,                                //弹层类型 1：页面层
                            content:$('#userInfoDialog'),         //弹层dom元素
                            closeBtn:2,                           //标题栏关闭图标样式  
                            shadeClose:true,
                            success:function(layero,index,that){  //弹层被成功打开后回调  
                                layero.find('#username').text(obj.data.username)
                                layero.find('#sex').html(obj.data.sex===1 ? '男' : '女')
                                layero.find('#phone').text(obj.data.phone)
                                layero.find('#addtime').html(`<div>{{ layui.util.toDateString(d.addtime,"yyyy年MM月dd日 HH时mm分ss秒") }}</div>`)
                                layero.find('#status').html(obj.data.status===0 ? '<div class="layui-badge layui-bg-blue">正常</div>' : '<div class="layui-badge layui-bg-red">禁用</div>')
                                layero.find('#password').text(obj.data.password)
                                layero.find('#salt').text(obj.data.salt)
                            },
                            btn:['关闭'],   //自定义按钮
                            btnAlign:'c',   //自定义按钮位置 l-左  c-中  r-右
                            btn1:function(){    //自定按钮事件
                                layer.closeAll()
                            }
                        })
                        break;
                    
                   
                }
            })
        })
    </script>
</body>

</html>